<template>
	<view class="u-p-28 u-flex" style="background: #FCEFDE;" v-if="userInfo.balance.freeze > 0">
		<u-icon name="info-circle-fill" color="#E88D1A" size="28"></u-icon>
		<text class="u-font-24 color-orange" style="margin-left: 10upx;">直推1人，可解除已冻结分红佣金及复购商品</text>
	</view>
	<view class="u-p-28 u-flex" style="background: #FCEFDE;" v-else-if="!isOrderFlag">
		<u-icon name="info-circle-fill" color="#E88D1A" size="28"></u-icon>
		<text class="u-font-24 color-orange" style="margin-left: 10upx;">暂无挂单数据</text>
	</view>
	<u-gap height="20"></u-gap>
	<view class="u-p-l-28 u-p-r-28 u-rela">
		<view class="bgw box-radius u-p-l-28 u-p-r-28 u-m-b-20">
			<!-- <view class="u-border-bottom u-p-28 u-flex">
				<view class="u-flex-1 u-content-color">
					订单编号
				</view>
				<view class="">
					4587254879632146
				</view>
			</view> -->
			<view class="u-p-28 u-flex" @click="toChooseGood">
				<view class="u-flex-1 u-content-color">
					选择商品
				</view>
				<view class="">
					<u-icon label-pos="left" name="arrow-right" color="#BBBBBB" size="24"></u-icon>
				</view>
			</view>
			<view class="u-m-b-20 u-p-l-20 u-p-r-20 box-radius u-relative" style="background-color: #F6F6F6;" v-if="currGood">
				<view class="close-btn" @click="delGood">
					<u-icon label-pos="left" name="close" color="#ffffff" size="24"></u-icon>
				</view>
				<item :detail="currGood" type="order">
					<template v-slot:right>
						<view class="">
							x1
						</view>
					</template>
				</item>
			</view>
			<u-gap height="1"></u-gap>
		</view>
		<view class="bgw box-radius u-m-b-20">
			<view class="tabs">
				<view class="tab" :class="[tabActive == 0 ? 'active':'']" @click="bindTab(0)">
					配送到家
				</view>
				<view class="tab" :class="[tabActive == 1 ? 'active':'']" @click="bindTab(1)">
					到店自提
				</view>
			</view>
			<view class="u-p-28" @click="navLogin('/pagesSub/addressList/addressList?from=order')"
				v-show="tabActive == 0 ">
				<view class="u-flex" v-if="currAddress">
					<image src="/static/images/icon-address.png" mode="widthFix" style="width: 42upx;"></image>
					<view class="u-flex-1 u-m-l-20">
						<view class="u-font-32">
							<text>{{currAddress.name}}</text>
							<text class="u-m-l-28">{{currAddress.phone}}</text>
						</view>
						<u-gap height="10"></u-gap>
						<view class="u-content-color">
							{{currAddress.province}}/{{currAddress.city}}/{{currAddress.district}}/{{currAddress.address}}
						</view>
					</view>
					<u-icon label-pos="left" name="arrow-right" color="#BBBBBB" size="30"></u-icon>
				</view>
				<view class="u-flex" v-else>
					<image src="/static/images/icon-address.png" mode="widthFix" style="width: 42upx;"></image>
					<view class="u-flex-1 u-p-20">
						<view class="u-font-28">
							<text>选择地址</text>
						</view>
					</view>
					<u-icon label-pos="left" name="arrow-right" color="#BBBBBB" size="30"></u-icon>
				</view>
			</view>
			<view class="" v-show="tabActive == 1 ">
				<!-- @click="navLogin('/pagesSub/shopList/shopList')" -->
				<view class="u-flex u-p-28" >
					<image src="/static/images/icon-ti.png" mode="widthFix" style="width: 42upx;"></image>
					<view class="u-flex-1 u-m-l-20" v-if="currShop">
						<view class="u-font-32">
							<text>自提店铺名称(圆通店)</text>
						</view>
						<u-gap height="10"></u-gap>
						<view class="u-content-color">
							盘龙区圆通街永乐巷20号
						</view>
					</view>
					<view class="u-flex-1 u-p-20" v-else>
						<view class="u-font-28">
							<text>选择自提点</text>
						</view>
					</view>
					<u-icon label-pos="left" name="arrow-right" color="#BBBBBB" size="30"></u-icon>
				</view>
				<u-line></u-line>
				<view class="u-p-l-28 u-p-r-28 u-p-t-10 u-p-b-10">
					<u-form :model="formData" ref="formRef" :label-width="150" :border-bottom="false">
						<u-form-item label="提货人" prop="name">
							<u-input v-model="formData.name" input-align="right" placeholder="请输入姓名" type="text"
								:clearable="true" />
						</u-form-item>
						<u-form-item label="提货电话" prop="num">
							<u-input v-model="formData.num" input-align="right" placeholder="请输入电话号码" type="number"
								:clearable="true" />
						</u-form-item>
					</u-form>
				</view>
			</view>
		</view>
		
		
		<!-- <view class="bgw box-radius u-p-28 u-m-b-20">
			<view class="u-flex">
				<image src="/static/images/icon-address.png" mode="widthFix" style="width: 42upx;"></image>
				<view class="u-flex-1 u-m-l-20">
					<view class="u-font-32">
						<text>朱延兴</text>
						<text class="u-m-l-28">13218744186</text>
					</view>
					<u-gap height="10"></u-gap>
					<view class="u-content-color">
						广西北流市迎宾路58号海洋家属楼119号
					</view>
				</view>
				<u-icon label-pos="left" name="arrow-right" color="#BBBBBB" size="30"></u-icon>
			</view>
		</view> -->
	</view>
	<u-gap height="150"></u-gap>
	<view class="fixed-bottom u-p-l-48 u-p-r-48 u-p-t-20 u-p-b-20 bgw">
		<view class="u-flex">
			<view class="u-flex-1 u-p-l-10 u-p-r-10">
				<u-button @click="submit" type="primary" shape="circle">确定</u-button>
			</view>
		</view>
	</view>

</template>

<script setup>
	import store from '@/store/index.js'; //需要引入store
	import mixins from '@/common/js/mixins.js';
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance
	} from 'vue'
	import {
		onReady,
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	const {
		proxy,
	} = getCurrentInstance()
	const {
		baseImgUrl
	} = proxy
	const {
		nav,
		navLogin,
		modal
	} = proxy.$util;
	const userInfo = computed(() => store.state.$userInfo)
	const isLogin = computed(() => {
		return store.getters.get_isLogin
	})
	const toChooseGood = () => {
		if(!currGood.value){
			navLogin('/pagesSub/waitOrderGoods/waitOrderGoods')
		}else{
			navLogin('/pagesSub/waitOrderGoods/waitOrderGoods?sid='+currGood.value.sid)
		}
		
	}
	const delGood = () => {
		currGood.value = null
	}

	const submit = async () => {
		if(!isOrderFlag.value){	
			uni.$u.toast('挂单区暂无订单');
			return;
		}
		let _data = {
			sid:orderSid.value
		};
		
		if(!currGood.value){
			uni.$u.toast('请选择商品');
			return;
		}
		_data.product = {
			count:1,
			productSid:currGood.value.sid
		}
		if (tabActive.value == 0) {			
			_data.pickup = 1;
			if (!currAddress.value) {
				uni.$u.toast('请选择地址');
				return;
			}
			_data.addressSid = currAddress.value.sid;
		}
		if (tabActive.value == 1) {
			_data.pickup = 2;
			if (!currShop.value) {
				uni.$u.toast('请选择门店');
				return;
			}
			_data.addressSid = currShop.value.sid;
		}
		uni.showLoading({
			title: '加载中',
			mask: true
		});
		proxy.$u.api.pendingOrder(orderSid.value,_data).then(res => {
			let {
				code,
				msg,
				data
			} = res;
			if (code == 200) {
				uni.$emit('order_update')
				modal({
					content: '提交成功！',
					showCancel: false
				}).then(res=>{
					uni.navigateBack();
				})
			} else {
				modal({
					content: msg,
					showCancel: false
				})
			}
		}).catch(() => {
			
		})
	}
	const isOrderFlag = ref(true)
	const orderSid = ref(null);
	const detail = reactive({})
	const currAddress = ref(null)
	const currShop = ref(null)
	const currGood = ref(null)
	const formData = reactive({})
	const tabActive = ref(0)
	const skeletonLoading = ref(true)
	const bindTab = (index) => {
		tabActive.value = index
	}
	const getData = () => {
		uni.showLoading({
			title: '加载中'
		});
		proxy.$u.api.getOrder({
			orderStatus:10
		}).then(res => {
			// console.log(res);
			let {
				code,
				msg,
				data
			} = res;
			if (code != 200) {
				uni.$u.toast(msg || '错误');
				return;
			}
			if(data.records.length > 0){
				orderSid.value = data.records[0].sid;
				// getDetail();
			}else{
				isOrderFlag.value = false
				modal({
					content: '挂单区暂无订单！',
					showCancel: false
				}).then(res=>{
					// uni.navigateBack();
				})
			}
		}).catch(res => {
			// skeletonLoading.value = false
		})
	}
	const getDetail = () => {
		if (!orderSid.value) {
			return;
		}
		uni.showLoading({
			title: '加载中'
		});
		proxy.$u.api.getOrderDetail(orderSid.value).then(res => {
			// console.log(res);
			let {
				code,
				msg,
				data
			} = res;
			if (code != 200) {
				uni.$u.toast(msg || '错误');
				return;
			}
			for (let key in res.data) {
				detail[key] = data[key]
			}
			if (detail.pickup == 1) {
				currAddress.value = detail.address;
				currShop.value = null;
				tabActive.value = 0;
			}
			if (detail.pickup == 2) {
				currShop.value = detail.address;
				currAddress.value = null;
				tabActive.value = 1;
			}
			note.value = detail.note || ''
			skeletonLoading.value = false
		}).catch(res => {
			skeletonLoading.value = false
		})
	}

	onReady(() => {

	})
	onLoad((d) => {
		getData();

	})
	onShow(() => {
		uni.$off('choose_address');
		uni.$once('choose_address', (v) => {
			currAddress.value = v
		})
		uni.$off('choose_shop');
		uni.$once('choose_shop', (v) => {
			currShop.value = v
		})
		uni.$off('choose_good');
		uni.$once('choose_good', (v) => {
			currGood.value = v
		})

	})
</script>
<style lang="scss" scoped>
	.fixed-bottom {
		box-shadow: 0px -4px 20px 0px rgba(0, 0, 0, 0.06);
		z-index: 999;
	}

	.close-btn {
		position: absolute;
		right: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
		width: 50upx;
		height: 50upx;
		border-radius: 0 0 0 100%;
		display: flex;
		justify-content: flex-end;
		padding-right: 10upx;
	}
	.tabs {
		display: flex;
		width: 100%;
		overflow: hidden;
		border-radius: 10upx 10upx 0 0;
		background: #F2FDF2;
	}
	
	.tab {
		flex: 0 0 50%;
		height: 40px;
		cursor: pointer;
		position: relative;
		text-align: center;
		line-height: 40px;
		color: #117B12;
	}
	
	.tab.active {
		background-color: #fff;
		color: #333333;
		font-weight: bold;
	}
	
	.tab.active:before {
		content: '';
		position: absolute;
		top: 0;
		left: -39px;
		height: 100%;
		width: 40px;
		z-index: 2;
		background-color: #fff;
		clip-path: path('M 0,40 C 20,40 20,0 40,0 L 40, 40 Z');
	}
	
	.tab.active:after {
		content: '';
		position: absolute;
		top: 0;
		right: -40px;
		height: 100%;
		width: 40px;
		z-index: 2;
		background-color: #fff;
		clip-path: path('M 0,0 C 20,0 20,40 40,40 L 0, 40 Z');
	}
	
	::v-deep.u-form-item {
		padding: 0 0;
	}
</style>